<%@ page import="model.Article" %>
<%@ page import="model.Comment" %>
<%@ page import="model.User" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    Article article = (Article)request.getAttribute("article");
    List<Comment> comments = (List<Comment>)request.getAttribute("comments");
    Integer totalCount = (Integer)request.getAttribute("totalCount");
    Integer currentPage = (Integer)request.getAttribute("currentPage");
    Integer totalPages = (Integer)request.getAttribute("totalPages");
    
    User user = (User)session.getAttribute("user");
    boolean isLoggedIn = user != null;
%>
<!DOCTYPE html>
<html>
<head>
    <title><%= article != null ? article.getTitle() : "文章详情" %> - 回声网络</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body { margin: 0; padding: 0; background: #f5f5f5; font-family: Arial; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background: #409EFF; color: white; padding: 0 20px; line-height: 60px; margin-bottom: 20px; }
        .article-content { background: white; padding: 30px; border-radius: 4px; }
        .article-title { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 15px; }

        .article-body { line-height: 1.6; font-size: 16px; }
        .comment-section { background: white; padding: 20px; margin-top: 20px; border-radius: 4px; }
        .comment-item { padding: 15px; border-bottom: 1px solid #f0f0f0; }
        .comment-header { margin-bottom: 8px; }
        .comment-author { font-weight: bold; color: #333; }
        .comment-time { color: #999; font-size: 12px; margin-left: 10px; }
        .comment-content { color: #333; line-height: 1.5; }
        .pagination { text-align: center; margin-top: 20px; }
        textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 8px 16px; background: #409EFF; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .delete-btn {
            padding: 4px 12px;
            background: #F56C6C;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .delete-btn:hover {
            background: #E64C4C;
        }
    </style>
</head>
<body>
<div class="header">
    <span style="font-size: 20px; font-weight: bold;">回声网络</span>
    <div style="float: right;">
        <a href="index.jsp" style="color: white; margin-right: 15px;">首页</a>
        <a href="articleList" style="color: white; margin-right: 15px;">文章列表</a>
    </div>
</div>

<div class="container">
    <!-- 文章内容 -->
    <div class="article-content">
        <div class="article-title">
            <%= article != null ? article.getTitle() : "文章标题" %>
            <% 
                // 检查当前用户是否为文章作者
                boolean isAuthor = false;
                if (isLoggedIn && article != null && user != null) {
                    isAuthor = article.getUserId().equals(user.getId());
                }
            %>
            <% if (isAuthor) { %>
            <form action="deleteArticle" method="post" style="display: inline; margin-left: 20px;">
                <input type="hidden" name="id" value="<%= article.getId() %>">
                <button type="submit" class="delete-btn" onclick="return confirm('确定要删除这篇文章吗？')">删除文章</button>
            </form>
            <% } %>
        </div>
        <div class="article-meta">
            作者：<span><%= article != null ? article.getAuthorName() : "作者名" %></span> |
            发布时间：<span><%= article != null ? article.getCreatedAt() : "发布时间" %></span> |
            阅读量：<span><%= article != null ? article.getViewCount() : "0" %></span>
        </div>
        <div class="article-body">
            <%= article != null ? article.getContentHtml() != null ? article.getContentHtml() : article.getContentMarkdown() : "文章内容" %>
        </div>
    </div>

    <!-- 评论区 -->
    <div class="comment-section">
        <h3>评论区 (<span><%= totalCount != null ? totalCount : "0" %></span>条评论)</h3>

        <!-- 评论表单 -->
        <% if (isLoggedIn) { %>
            <form action="comment" method="post">
                <input type="hidden" name="articleId" value="<%= article != null ? article.getId() : "" %>">
                <textarea name="content" placeholder="写下你的评论..." rows="4" maxlength="500" required></textarea>
                <button type="submit" class="btn">发表评论</button>
            </form>
        <% } else { %>
            <div style="text-align: center; padding: 20px; color: #666;">
                <a href="login.html">请登录后发表评论</a>
            </div>
        <% } %>

        <!-- 评论列表 -->
        <div class="comments-list">
            <% if (comments == null || comments.isEmpty()) { %>
                <div>暂无评论，快来发表第一条评论吧！</div>
            <% } else { %>
                <% for (Comment comment : comments) { %>
                <div class="comment-item">
                    <div class="comment-header">
                        <span class="comment-author"><%= comment.getAuthorName() %></span>
                        <span class="comment-time"><%= comment.getCreatedAt() %></span>
                    </div>
                    <div class="comment-content"><%= comment.getContent() %></div>
                </div>
                <% } %>
            <% } %>
        </div>

        <!-- 分页 -->
        <% if (totalPages != null && totalPages > 1) { %>
        <div class="pagination">
            <% if (currentPage != null && currentPage > 1) { %>
            <a href="articleDetail?id=<%= article != null ? article.getId() : "" %>&page=<%= currentPage - 1 %>">上一页</a>
            <% } %>
            <span>第 <span><%= currentPage != null ? currentPage : "1" %></span> 页 / 共 <span><%= totalPages %></span> 页</span>
            <% if (currentPage != null && currentPage < totalPages) { %>
            <a href="articleDetail?id=<%= article != null ? article.getId() : "" %>&page=<%= currentPage + 1 %>">下一页</a>
            <% } %>
        </div>
        <% } %>
    </div>
</div>
</body>
</html>